<template>
    <swiper :scrollbar="{ hide: true, }" :navigation="true" :modules="modules" :slidesPerView="5" :spaceBetween="30"
        :freeMode="true" class="mySwiper">
        <swiper-slide v-for="item in images" :key="item.id">
            <el-image style="width: 232px;":src="item.image" />
        </swiper-slide>
    </swiper>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css/scrollbar';
import 'swiper/css/free-mode';
import { Navigation, Scrollbar, FreeMode } from 'swiper/modules';

const modules = [Navigation, Scrollbar, FreeMode]


const props = defineProps({
    "images": Array,
})

</script>
<style scoped lang="scss">
:deep(.swiper-button-prev),:deep(.swiper-button-next){
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #000;
    // transform: translateX(-30px);
}

:deep(.swiper-button-prev::after),:deep(.swiper-button-next::after){
    font-size: 14px;
    color: #fff;
}

</style>